<template>
  <div class="ordering">
    <div class="heading">用户列表</div>
    <div>
      <el-table :data="user_array" style="width: 100%">
        <el-table-column
          prop="time"
          label="注册时间"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column label="头像" align="center" class="custom-cell">
          <template #default="scope">
            <el-image
              style="width: 40px; height: 40px"
              :src="scope.row.head"
              :preview-src-list="[scope.row.head]"
              :z-index="999"
              fit="cover"
            />
          </template>
        </el-table-column>

        <el-table-column prop="sex" align="center" label="性别" min-width="100">
        </el-table-column>
        <el-table-column
          prop="position"
          align="center"
          label="职位"
          min-width="100"
        >
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="pagination-container">
        <el-pagination
          background
          layout="prev,pager,next"
          :total="totalCount"
          :hide-on-single-page="false"
          @current-change="current_change"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {reactive, onMounted, getCurrentInstance, toRefs} from "vue";

export default {
  setup() {
    const {proxy} = getCurrentInstance();
    const opendata = reactive({user_array: [], totalCount: 0, page: 0});
    //请求数据
    onMounted(() => {
      userlist();

      //console.log(data)
    });
    async function userlist() {
      try {
        const res = await new proxy.$request(
          proxy.$urls.m().pulluserlist + "?page=" + opendata.page
        ).modeGet();
        // console.log(res.data);
        opendata.user_array = res.data.userList;
        opendata.totalCount = res.data.totalCount;
        //console.log(opendata);
      } catch (e) {
        new proxy.$tips(e, "error").mess_age();
      }
    }

    function current_change(number) {
      opendata.page = number;
      console.log(opendata.page - 1);
      userlist();
    }
    return {...toRefs(opendata), current_change};
  },
};
</script>

<style scoped="scoped">
.custom-cell {
  position: static !important;
}

.pagination-container {
  display: flex;
  justify-content: center; /* 将内容水平居中 */
}

::v-deep .el-pagination.is-background .el-pager li.is-active {
  background-color: rgb(18, 175, 18) !important;
  color: white;
}

::v-deep .el-table__cell {
  /* 添加您需要的样式 */
  position: static !important;
}
</style>
